<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>当当网注册页面</title>
    <link href="css/global.css" rel="stylesheet" type="text/css" />
    <link href="css/layout.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/register.js"></script>
	<script>
		$(document).ready(function(){
			Tishi();
			//验证邮箱
			$("#email").blur(function(){
				var m = $(this).val();
				var reg = /^[a-z0-9]\w+@[a-z0-9]{2,3}(\.[a-z]{2,3}){1,2}$/;
				if(m==""){
					$("#email").css("background-color","#F5DEB3");
					$("#email_prompt").css("color","red");
					$("#email_prompt").html("邮箱为必填项，请填写邮箱");
				}
				else{
					if(reg.test(m)){
						$("#email_prompt").css("color","blue");
						$("#email_prompt").html("邮箱正确！");
						$("#email").css("background-color","#F5FFFA");
					}
					else{
						$("#email").css("background-color","#F5DEB3");
						$("#email_prompt").css("color","red");
						$("#email_prompt").html("邮箱格式不对，请填写正确邮箱");
					}
				}
			});
			//验证用户名
			$("#nickName").blur(function(){
				var m = $(this).val();
				var reg = /^\D\w{4,9}$/;
				if(m==""){
					$("#nickName").css("background-color","#F5DEB3");
					$("#nickName_prompt").css("color","red");
					$("#nickName_prompt").html("用户名为必填项，请填写用户名，不能以数字开头，长度为5-10");
				}
				else{
					if(reg.test(m)){
						$("#nickName_prompt").css("color","blue");
						$("#nickName_prompt").html("用户名格式正确！");
						$("#nickName").css("background-color","#F5FFFA");
					}
					else{
						$("#nickName").css("background-color","#F5DEB3");
						$("#nickName_prompt").css("color","red");
						$("#nickName_prompt").html("用户名格式不对，请填写正确用户名，不能以数字开头，长度为5-10");
					}
				}
			});
			//验证密码
			$("#pwd").blur(function(){
				var m = $(this).val();
				var reg = /^\w{6}$/;
				if(m==""){
					$("#pwd").css("background-color","#F5DEB3");
					$("#pwd_prompt").css("color","red");
					$("#pwd_prompt").html("密码为必填项，请填写密码，长度为6");
				}
				else{
					if(reg.test(m)){
						$("#pwd_prompt").css("color","blue");
						$("#pwd_prompt").html("密码格式正确！");
						$("#pwd").css("background-color","#F5FFFA");
					}
					else{
						$("#pwd").css("background-color","#F5DEB3");
						$("#pwd_prompt").css("color","red");
						$("#pwd_prompt").html("密码格式不对，请填写密码，长度为6");
					}
				}
			});
			//验证两次密码是否一致
			$("#repwd").blur(function(){
				var m = $(this).val();
				var m1 = $("#pwd").val();
				if(m==""){
					$("#repwd").css("background-color","#F5DEB3");
					$("#repwd_prompt").css("color","red");
					$("#repwd_prompt").html("请再次填写密码");
				}
				else{
					if(m===m1){
						$("#repwd_prompt").css("color","blue");
						$("#repwd_prompt").html("密码正确！");
						$("#repwd").css("background-color","#F5FFFA");
					}
					else{
						$("#repwd").css("background-color","#F5DEB3");
						$("#repwd_prompt").css("color","red");
						$("#repwd_prompt").html("密码错误");
					}
				}
			});
			
			//省市二级联动
			var pro=["河南","山东","福建"];
			var city=[["郑州","开封","新政","濮阳","平顶山","洛阳","三门峡"],["济南","日照","烟台","德州","聊城"],["福州","厦门","泉州","莆田"]];
			$(function(){
				//初始化省份下拉列表
				
				for(var i=0;i<pro.length;i++){
					$("#province").append($("<option></option>").val(i+1).html(pro[i]));
				}
				//为省份下拉列表绑定change事件
				$("#province").change(function(){
					var index=$(this).val()-1;//获取当前省的下标
					$("#city").prop("length",1);//清空原有的数据
					for(var i=0;i<city[index].length;i++){//重新为市赋值
						$("#city").append($("<option>").val(i+1).html(city[index][i]));
					}
				});
			});
		});
		//提示信息
		function Tishi(){
			$("#email").css("background-color","#F5FFFA");
			$("#nickName").css("background-color","#F5FFFA");
			$("#pwd").css("background-color","#F5FFFA");
			$("#repwd").css("background-color","#F5FFFA");
			$("#email_prompt").html("请填写邮箱");
			$("#nickName_prompt").html("请填写用户名,不能以数字开头，长度为5-10");
			$("#pwd_prompt").html("请填写密码，长度为6");
			$("#repwd_prompt").html("请再次填写密码");
		}
	</script>
</head>

<body>
<div id="header">
    <div id="register_header">
        <div class="register_header_left"><img src="images/logo.gif" alt="logo"/></div>
        <div class="register_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a>  | <a href="shopping.html" class="blue">购物车</a> |  <a href="login.html" class="blue">登录</a></div>
    </div>
</div>
<div id="main">
    <div class="register_content">
        <div class="register_top_bg"></div>
        <div class="register_mid_bg">
            <ul>
                <li class="register_mid_left">填写注册信息</li>
                <li class="register_mid_mid">2. 邮箱验证</li>
                <li class="register_mid_right">3. 完成注册</li>
            </ul>
        </div>
        <div class="register_top_bg_mid">
            <div class="register_top_bg_two_left"></div>
            <div class="register_top_bg_two_right"></div>
            <div class="register_title_bg"><img src="images/register_pic_02.gif" alt="欢迎注册"/><br/>您所提供的资料不会做其他用途，敬请安心填写。</div>
        </div>
        <div class="register_dotted_bg"></div>
        <div class="register_message">
            <form action="" method="post" id="myform">
                <dl class="register_row">
                    <dt>Email地址：</dt>
                    <dd><input id="email" type="text" class="register_input"/></dd>
                    <dd><div id="email_prompt"></div></dd>
                </dl>
                <dl class="register_row">
                    <dt>设置昵称：</dt>
                    <dd><input id="nickName" type="text" class="register_input"/></dd>
                    <dd><div id="nickName_prompt"></div></dd>
                </dl>
                <dl class="register_row">
                    <dt>设定密码：</dt>
                    <dd><input id="pwd" type="password" class="register_input"/></dd>
                    <dd><div id="pwd_prompt"></div></dd>
                </dl>
                <dl class="register_row">
                    <dt>再输入一次密码：</dt>
                    <dd><input id="repwd" type="password" class="register_input"/></dd>
                    <dd><div id="repwd_prompt"></div></dd>
                </dl>
                <dl class="register_row">
                    <dt>性别：</dt>
                    <dd><input name="sex" id="man" type="radio" value="男" checked="checked"/> <label for="man">男</label></dd>
                    <dd> <input name="sex" id="woman" type="radio" value="女"/> <label for="woman">女</label></dd>
                </dl>
                <dl class="register_row">
                    <dt>所在地区：</dt>
                    <dd>
                        <select id="province" style="width:120px;">
                            <option>请选择省/城市</option>
                        </select>
                    </dd>
                    <dd>
                        <select id="city"  style="width:130px;">
                            <option>请选择城市/地区</option>
                        </select>
                    </dd>
                </dl>
                <div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif"/></div>
            </form>
        </div>
    </div>
</div>
<!--网站版权部分开始-->
<div id="footer">
    <iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
</div>
</body>
</html>
